<template>
  <div class="import">
    <upload-excel :beforeUpload="beforeUpload" :onSuccess="onSuccess" />
  </div>
</template>

<script>
// 导入接口
import { batchEmp } from '@/api/employees'

// 导入Excel
export default {
  methods: {
    // 读取文件之前 参数就是选择的文件
    // 如果返回true就往下读取 如果返回false 就不往下读取
    beforeUpload (file) {
      // console.log(file)
      // 限制文件大小只能在2M以内
      if (file.size > 1024 * 2 * 1024) {
        this.$message.error('文件不能大于2M')
        return false
      }
      return true
    },
    // 读取成功之后的回调函数
    // 把读取的内容当做参数传递 参数是一个对象
    // 对象里有两个属性 heard results
    //  heard 对应的表头  results 对应的内容 就是数据
    async onSuccess ({ heard, results }) {
      // console.log(res)
      // 因为excel里的标题是中文的，读取出来的结果也是中文
      // 所以要把中文转换成对应的英文
      if (this.$route.query.type == 'emp') {
        const userRelations = {
          入职日期: 'timeOfEntry',
          手机号: 'mobile',
          姓名: 'username',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          部门: 'departmentName'
        }
        // 遍历读取到的内容
        let list = results.map(item => {
          //  遍历这个对象 把每个键替换成英文
          let newObj = {}
          for (let key in item) {
            // key就是键
            // 根据上面的对象转换成英文键
            let engKey = userRelations[key]
            // 原来对象的值 赋值给新对象 存到英文值对应的属性上
            // 因为Excel的如期 如果通过js导入到我们的项目中时  会变成一个整数
            // 这个整数是代表从1900年到真是日期的天数
            // 处理日期格式
            // 判断key是不是事件
            if (key == '入职日期' || key == '转正日期') {
              // 取出时间
              let excelTime = item[key]
              // 计算出时间戳
              let date = new Date((excelTime - 1) * 24 * 60 * 60 * 1000)
              // 取出年份
              let year = date.getFullYear()
              // 将年份减去70 因为时间戳是从1970年1月1日开启计算的
              //  而Excel的时间是从1900年计算的
              date.setFullYear(year - 70)
              // 赋值
              newObj[engKey] = date
            } else {
              newObj[engKey] = item[key]
            }
          }
          return newObj
        })
        // console.log(list)
        // 把读取到的内容 传递给服务器
        // 发请求
        await batchEmp(list)
        // 消息提示
        this.$message.success('导入成功')
        // 返回上一页
        this.$router.back()
      }
    }
  }
}
</script>

<style></style>
